<template>
	<view class="page">
		<view class="search-box">
			<u-search placeholder="搜索创作者" shape="square" borderColor="#536BF6" searchIconColor="#536BF6" v-model="word"
				height="70rpx" searchIconSize="50" bgColor="#FFFFFF" :focus="true" @search="search" @custom="search"
				:show-action="true" :disabled="false" maxlength="6" @clear="inputClear">
			</u-search>
		</view>
		<view class="content">
			<writerItem :dataList="targetCreator"></writerItem>
			<works :works="images" v-show="searchType==2 && byTagisEmpty==0"></works>
			<kong :text="wordRender" v-show="searchType==1 && !beforeSearch && targetCreator.length==0"></kong>
			<kong text="暂未找到相关内容" v-show="searchType==2 && byTagisEmpty==1"></kong>
			<view class="like" v-show="searchType==2 && byTagisEmpty==1">
				<view class="tit">
					猜你喜欢
				</view>
				<works :works="images"></works>
			</view>
			<view class="history" v-if="beforeSearch && history.length!=0">
				<view class="tit">
					历史搜索
					<u-icon name="trash" size="36" @click="historyClear"></u-icon>
				</view>
				<view class="items">
					<text v-for="(item,index) in history" :key="index" @click="search(item)">{{item}}</text>
				</view>
			</view>
			<view class="hot" v-show="beforeSearch">
				<view class="tit">
					热门标签
				</view>
				<view class="items">
					<text v-for="(item,index) in tags" :key="index" @click="tagClick(item.title)">{{item.title}}</text>
				</view>
			</view>
			<view class="recommend" v-show="searchType==1 && !beforeSearch && targetCreator.length==0">
				<view class="tit">
					为您推荐
				</view>
				<writerItem :dataList="creators"></writerItem>
			</view>

		</view>
	</view>
</template>

<script>
	import works from "../../components/works/works.vue"
	import kong from "../../components/kong/kong.vue"
	import writerItem from "../../components/writer-item/writer-item.vue"
	export default {
		components: {
			writerItem,
			kong,
			works
		},
		data() {
			return {
				word: '',
				wordRender: '',
				targetCreator: [],
				beforeSearch: true,
				images: [],
				byTagisEmpty: 0,
				creators: [],
				tag: '',
				tags: [],
				history: [],
				page: 1,
				lastPage: 1,
				imagePage: 1,
				imageLastPage: 1,
				searchType: 1, // 1=搜索创作者,2=搜索标签
				status: 'loadmore'
			}
		},
		onLoad() {
			this.getHistory()
			this.getTags()
		},
		onReachBottom() {
			if (this.searchType == 1) {
				if (this.creators.length != 0) {
					this.status = 'loading';
					setTimeout(() => {
						this.page++
						if (this.page <= this.lastPage) {
							this.recommendCreators()
						}
					}, 100)
				}
			} else {
				if (this.images.length != 0) {
					this.status = 'loading';
					setTimeout(() => {
						this.imagePage++
						if (this.imagePage <= this.imageLastPage) {
							this.searchByTag()
						}
					}, 100)
				}
			}

		},
		methods: {
			// 根据搜索和浏览推荐
			// guessLike() {
			// 	this.$api.guessLike('').then((res) => {
			// 		this.images = res.data
			// 	})
			// },
			inputClear() {
				this.word = ''
				this.beforeSearch = true
				this.creators = []
				this.images = []
				this.page = 1
				this.lastPage = 1
				this.imagePage = 1
				this.imageLastPage = 1
			},
			historyClear() {
				uni.removeStorageSync('search_history')
				this.history = []
			},
			getHistory() {
				this.history = uni.getStorageSync('search_history')
			},
			getTags() {
				this.$api.getTags().then((res) => {
					this.tags = res.data
				})
			},
			tagClick(tag) {
				this.tag = tag
				this.word = tag
				this.beforeSearch = false
				this.searchType = 2
				this.creators = []
				this.page = 1
				this.lastPage = 1
				this.searchByTag()
			},
			searchByTag() {
				this.$api.searchByTag(this.tag, this.imagePage).then((res) => {
					this.byTagisEmpty = res.data.is_empty
					this.imageLastPage = res.data.last_page
					if (res.data.data.length == 0) {
						this.status = 'nomore';
					} else {
						this.status = 'loading';
						this.images = [...this.images, ...res.data.data];
					}
				})
			},
			search(word) {
				if (word == '') {
					return
				}
				this.searchType = 1
				this.word = word
				this.wordRender = "未找到创作者: " + word
				// 处理搜索历史
				if (this.history.length != 0) {
					this.history = this.history.filter(item => item != word)
					this.history.unshift(word)
					if (this.history.length > 12) {
						this.history.pop()
					}
				} else {
					this.history = [word]
				}
				uni.setStorageSync('search_history', this.history)
				// 搜索
				this.$api.search(word).then((res) => {
					this.images = []
					this.imagePage = 1
					this.imageLastPage = 1
					this.beforeSearch = false
					if (res.data.length != 0) {
						this.targetCreator = res.data
					} else {
						this.recommendCreators()
						this.targetCreator = []
					}
				})
			},
			recommendCreators() {
				this.$api.recommendCreators(this.page).then((res) => {
					this.lastPage = res.data.last_page
					if (res.data.data.length == 0) {
						this.status = 'nomore';
					} else {
						this.status = 'loading';
						this.creators = [...this.creators, ...res.data.data];
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		// padding: 0 8rpx;
	}

	.search-box {
		background-color: #fff;
		// border: 2rpx solid $uni-color-primary;
		border-radius: 10rpx;
		padding: 10rpx 0;
	}

	.content {
		border-radius: 20rpx 20rpx 0 0;
		margin-top: -20rpx;
		background-color: #fff;
		padding: 30rpx 0 20rpx;

		.tit {
			display: flex;
			justify-content: space-between;
			font-size: 26rpx;
			color: #666;
			font-weight: 600;
			margin-bottom: 20rpx;
			padding: 0 4rpx;
		}

		.items {
			padding: 0 6rpx;
			display: flex;
			flex-wrap: wrap;

			text {
				display: block;
				font-size: 26rpx;
				padding: 6rpx 20rpx;
				background-color: #eee;
				color: #999;
				border-radius: 10rpx;
				margin-right: 10rpx;
				margin-bottom: 20rpx;
			}
		}

		.hot {
			margin-top: 40rpx;
		}

		.like {
			margin-top: 60rpx;
		}

		.recommend {
			margin-top: 60rpx;
		}
	}
</style>
